<template>
  <div class="projectinfo">
    <!-- 任务评论页面 -->
    <div class="infobox">
      <div
        class="infocontent"
        v-for="(item, index) in commentList1"
        :key="index"
        :class="item.parentId !== item.id ? 'childreninfo' : ''"
      >
        <div class="touxiang">
          <img :src="item.userUrl" alt="" />
        </div>
        <div class="allinfo">
          <span v-if="item.parentId !== item.id"
            >{{ item.userName }}回复了{{ item.parentUserName }}的评论</span
          >
          <span v-else>{{ item.userName }}评论了任务</span>
          <span>{{ item.createTime }}</span>
          <span>[{{ index + 1 }}楼]</span>
          <span
            class="deleteIcon"
            v-if="userId === item.createdId"
            @click="deleteComment(item.id)"
            ><i class="el-icon-delete"></i
          ></span>
          <span
            class="roundIcon"
            v-else
            @click="
              roundComment({
                id: item.id,
                createdId: item.createdId,
                name: item.userName,
              })
            "
            ><i class="el-icon-chat-dot-round"></i
          ></span>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <p v-if="addCommentList.parentid">回复{{ roundName }}的评论</p>
    <div class="inputinfo">
      <textarea
        type="text"
        maxlength="100"
        v-model="addCommentList.name"
        placeholder="请输入发送的信息(限100字)"
      ></textarea>
      <button @click="sendOutComment">发送</button>
    </div>
  </div>
</template>

<script>
import {addComment, deleteComment} from '@/api/task/task.js';
export default {
  name: 'project-info',
  inject: ['reload'],
  props: {
    commentList: {
      type: [Object, Array],
      required: true
    },
    commentUserId: {
      type: [Number, String]
    }
  },
  computed: {
  },
  created() {
    // this.initList();
    setTimeout(() => {
      this.initList();
    }, 600);
    // console.log(this.commentUserId);
  },
  data() {
    return {
      userId: parseInt(sessionStorage.getItem('userid')), // 用户id
      addCommentList: { // 新增评论数据
        businessid: parseInt(localStorage.getItem('taskId')), // 业务id-当前任务id
        createdid: parseInt(sessionStorage.getItem('userid')), // 创建人id
        name: '', // 内容
        parentid: null, // 父级id-被回复人id
        type: 2, // 属性-1-项目  2-任务
        userId: parseInt(this.commentUserId), // 任务数据userid
        parentuserid: null // 被评论人userid
      },
      roundName: '', // 被回复人名字
      commentList1: []
    };
  },
  methods: {
    // 排序
    p1(par) {
      let arr = [...par];// 如果不想改变原数组
      arr.forEach(item => {
        if (item.parentId === null) {
          item.parentId = item.id;
        }
      });
      for (var o = 0; o < arr.length - 1; o++) {
        for (var p = o + 1; p < arr.length; p++) {
          if (arr[o].id === arr[p].parentId) {
            arr[p].parentId = arr[o].parentId;
          }
        }
      }
      for (var i = 0; i < arr.length - 1; i++) {
        let t = {};
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].parentId > arr[j].parentId) {
            t = arr[i];
            arr[i] = arr[j];
            arr[j] = t;
          }
        }
      }
      return arr;
    },
    initList() {
      this.commentList1 = this.p1(this.commentList);
      // console.log(this.commentList1);
    },
    // 删除评论
    deleteComment(id) {
      this.$confirm('确定要删除该评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteComment({id: parseInt(id)});
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '删除成功！',
            type: 'success'
          });
          // 刷新列表
          this.reload();
          // this.$router.go(0);
          // window.location.reload();
        } else {
          this.$message({
            showClose: true,
            message: '删除失败，请稍后重试！',
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    // 回复评论
    roundComment(data) {
      // console.log(this.commentList);
      // console.log(data);
      this.addCommentList.parentid = data.id;
      this.addCommentList.parentuserid = data.createdId;
      this.roundName = data.name;
    },
    // 发送评论
    async sendOutComment() {
      this.addCommentList.userId = parseInt(this.commentUserId);
      // console.log(this.addCommentList);
      if (this.addCommentList.name === '') {
        return this.$message({
          showClose: true,
          message: '评论内容不能为空！',
          type: 'warning'
        });
      }
      const res = await addComment(this.addCommentList);
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '评论成功！',
          type: 'success'
        });
        // 刷新列表
        this.reload();
        // this.$router.go(0);
        // window.location.reload();
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '评论失败,请稍后重试！',
          type: 'error'
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.projectinfo {
  text-align: left;
  width: 100%;
  // padding: 20px;
  box-sizing: border-box;
  .infobox {
    // width: 100%;
    height: 350px;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 20px 0 20px 20px;
    .infocontent {
      display: flex;
      position: relative;
      margin-top: 10px;
      .touxiang {
        margin-right: 20px;
        margin-top: 7.5px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          box-shadow: 1px 1px 3px #888888;
        }
      }
      .allinfo {
        span {
          color: #555;
          font-size: 14px;
          display: inline-block;
          margin: 0 10px;
          margin-top: 5px;
        }
        .deleteIcon,
        .roundIcon {
          cursor: pointer;
          display: inline-block;
          width: 28px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          border-radius: 14px;
          background-color: #e8f8fb;
          i {
            font-size: 16px;
            color: #5ad188;
          }
        }
        p {
          color: #111;
          font-size: 14px;
          margin: 0 10px;
          margin-top: 5px;
        }
      }
    }
    .childreninfo {
      display: flex;
      position: relative;
      margin-left: 100px;
      margin-top: 20px;
      .touxiang {
        margin-right: 20px;
        margin-top: 7.5px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          box-shadow: 1px 1px 3px #888888;
        }
      }
      .allinfo {
        span {
          color: #555;
          font-size: 14px;
          display: inline-block;
          margin: 0 10px;
          margin-top: 5px;
        }
        p {
          color: #111;
          font-size: 14px;
          margin: 0 10px;
          margin-top: 5px;
        }
      }
    }
  }
  p {
    font-size: 14px;
  }
  .inputinfo {
    margin-top: 20px;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    color: #555;
    textarea {
      width: calc(85% - 40px);
      height: calc(100% - 40px);
      border: 1px solid #dae1fd;
      outline: none;
      padding: 20px;
      resize: none;
    }
    textarea:focus {
      box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
        inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
    }
    button {
      width: 10%;
      height: 100%;
      color: white;
      background: #6c59cd;
      border-radius: 8px;
      cursor: pointer;
    }
    // .upfile {
    //   position: absolute;
    //   bottom: -30px;
    //   display: flex;
    //   div {
    //     cursor: pointer;
    //   }
    //   img {
    //     width: 15px;
    //     cursor: pointer;
    //     vertical-align: bottom;
    //   }
    // }
  }
}
</style>
